<template>
	<div id="example">
		<div class="question-select">
			<select v-model="currentProvince" class="short">
				<option v-for="(option,index) in allProvinces" :key="index" :value="option.name">
					{{ option.name }}
				</option>
			</select>
			<select v-model="currentCity" class="long">
				<option v-for="(option,index) in provinceSub" :key="index" :value="option.name">
					{{ option.name }}
				</option>
			</select>
			<select v-model="currentDistrict" v-if="currentDistrict" class="long">
				<option v-for="(option,index) in citySub" :key="index" :value="option.name">
					{{ option.name }}
				</option>
			</select>
		</div>
	</div>
</template>

<script>
</script>

<style>
	.question-select {
		height: 40px;
	}
	.question-select select {
		border-radius: 0px;
		box-shadow: 0 0 5px #ccc;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		border: none;
		outline: none;
		height: 100%;
		padding: 0 20px;
		color: #333;
		font-size: 22px;
	}

	.question-select select.long {
		width: 300px;
	}

	.question-select select.short {
		width: 150px;
	}
</style>
